<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理练习</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            let i = 1;
            $("#more").click(function () {
                let d = $("#d").clone(true);
                d.attr("id", "d" + i);
                $(this).before(d);
                // 清除克隆出来的文件选择器中的内容
                $("#d" + i + " input").val("")
                i++;
            });
            $("a").click(function () {
                if ($(this).parent().attr("id") != "d") {
                    $(this).parent().remove();
                }

            });
            $("#show").click(function () {
                // console.log($("input[type='file']").val())
                // console.log($("input[type='file']")[0].value)
                // console.log($("input[type='file']")[1].value)

                // each(fn):其中fn可以无参
                // $("input[type='file']").each(function(){
                //     // this表示迭代的当前元素
                //     console.log($(this).val());
                // });

                // fn也可以只有一个参数,此时的参数表示索引号
                // $("input[type='file']").each(function(index){
                //     // this表示迭代的当前元素
                //     console.log("文件名:"+$(this).val()+",索引号:"+index);
                // });
                // fn也可以有两个参数,此时的参数一表示索引号,参数二表示当前迭代的对象,该对象是DOM对象
                $("input[type='file']").each(function (index, ele) {
                    // this表示迭代的当前元素
                    console.log("文件名:" + $(ele).val() + ",索引号:" + index);
                });
            });
        })
    </script>
</head>
<body>
<!--
    1.当点击上传更多的时候,页面中新增一个与原div完全一致的元素,id不能重复
        div中包含了文件选择器与删除链接
        且如果原来的文件选择器中选择了内容,则内容还在,但是新增的文件选择器中没有内容
    2.当点击删除链接时,删除当前链接所在的div,第一个原始的div不能被删除
-->
<div id="d">
    <input type="file">
    <a href="javascript:;">删除</a>
</div>
<button id="more">上传更多</button>
<button id="show">显示文件名</button>
</body>
</html>